import * as React from 'react';
import { Icon } from 'antd';
import makeHoc from 'components/common/makeHoc';
import CONFIG from 'constants/config';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadablePopImageSelect = LoadableComponent(() => import('pages/attachment/PopToSelect'));
const LoadableMedia = LoadableComponent(() => import('components/common/Media'));

import { isEqualWithNumber } from 'utils/utils';

interface EditImageProps {
  dispatch: (action: any) => any;
  handleCallback: (urls: string[]) => any;
  images: any[];
  selectedItems: any[];
  selectMax?: number;
}

interface EditImageState {
  isSelectImage: boolean;
}
class EditImage extends React.Component<EditImageProps, EditImageState> {
  static defaultProps: EditImageProps = {
    dispatch: () => {},
    handleCallback: () => {},
    images: [],
    selectedItems: [],
    selectMax: 0,
  };
  constructor(props: EditImageProps) {
    super(props);
    this.state = {
      isSelectImage: false,
    };
  }

  handleRemoveImage(targetId: number) {
    const { images, handleCallback } = this.props;

    const leftImages = images.filter((image: any) => {
      return !isEqualWithNumber(image.id, targetId);
    });
    handleCallback(leftImages);
  }

  handleCloseModal = () => {
    this.setState({
      isSelectImage: false,
    });
  };

  handleOpenModal = () => {
    this.setState({
      isSelectImage: true,
    });
  };

  handleSubmit = () => {
    const { selectedItems, handleCallback } = this.props;
    handleCallback(selectedItems);
    this.handleCloseModal();
  };

  // 渲染知识点当前的附件
  renderItems = (): any => {
    const { images, selectMax } = this.props;

    if (images.length === 0) {
      return (
        <p className="loading-placeholder">
          还没有数据，&nbsp;
          <a href="javascript:void(0);" onClick={this.handleOpenModal}>
            <Icon type="plus" />
            添加
          </a>
        </p>
      );
    }

    let liStyle: any = {
      position: 'relative',
      background: 'white',
    };
    let imgStyle: any = {
      width: '50%',
      height: '50%',
      verticalAlign: 'top',
      backgroundSize: 'cover',
    };
    if (selectMax && selectMax > 1) {
      liStyle['float'] = 'left';
      liStyle['marginRight'] = 20;
      liStyle['marginBottom'] = 20;

      imgStyle['width'] = 160;
      imgStyle['height'] = 160;
      imgStyle['display'] = 'flex';
      imgStyle['alignItems'] = 'center';
    }

    return (
      <ul
        className="asset-gallery"
        style={{
          listStyle: 'none',
          padding: 0,
          margin: 4,
          display: 'flex',
          justifyContent: 'center',
        }}>
        {images.map((image: any) => {
          return (
            <li key={image.id} className="gallery-item" style={liStyle}>
              <LoadableMedia
                attachment={image}
                onDestroy={() => {
                  this.handleRemoveImage(image.id);
                }}
                imageStyle={imgStyle}
              />
            </li>
          );
        })}
      </ul>
    );
  };

  render() {
    return (
      <div>
        {this.state.isSelectImage && (
          <LoadablePopImageSelect
            selectType={CONFIG.ITEM_IMAGE}
            onCancel={this.handleCloseModal}
            onOk={this.handleSubmit}
            selectMax={this.props.selectMax}
          />
        )}
        {this.renderItems()}
      </div>
    );
  }
}

interface OwnProps {
  images: any[];
  handleCallback: () => any;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { selectedItems } = state.attachment;
  const { images, handleCallback } = ownProps;
  return {
    images,
    handleCallback,
    selectedItems,
  };
}

export default makeHoc(mapStateToProps)(EditImage, {
  addImage() {
    this.handleOpenModal();
  },
});
